<template>
  <div class="menu">
    <div
      v-for="(item, index) in menuItems"
      :key="index"
      class="menu-item"
      :class="{ active: activeIndex === index }"
      @mouseover="showOverlay(index)"
      @mouseleave="outOverlay(index)"
      @click="activateMenuItem(index, item)"
      ref="menuItem"
    >
      {{ item.name }}
    </div>
    <div
      class="overlay"
      :style="{
        top: overlayTop + 'px',
        left: overlayLeft + 'px',
        width: overlayWidth + 'px',
        height: overlayHeight + 'px',
      }"
    ></div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, watch } from "vue";
import { useRouter } from "vue-router";
import { useMenusStore } from "../../stores/menus";
import { useUserStore } from "../../stores/user";
const router = useRouter();
const userStore = useUserStore();
const menusAction = useMenusStore();

// 使用计算属性来响应用户状态变化
const menuItems = computed(() => [
  { name: "首页", id: "home" },
  { name: "关于我", id: "about" },
  { name: "技术栈", id: "resume" },
  { name: "博客", id: "blog", path: "/blog" },
  { name: "小作品", id: "work", path: "/portfolio" },
  { name: "留言", id: "contact", path: "/contact" },
  { name: userStore.loginStatus ? "用户中心" : "登录", id: "login", path: userStore.loginStatus ? "/userInfo" : "/login" },
]);

// 响应式数据，用于存储当前鼠标悬停的选项的索引、底纹的位置和宽度，以及默认激活的菜单项索引
const activeIndex = ref(0); // 默认设置为第一个菜单项
const overlayLeft = ref(0);
const overlayTop = ref(0);
const overlayWidth = ref(0);
const overlayHeight = ref(0);
const menuItemRefs = ref([]);
const menuItem = ref(null);

const outOverlay = () => {
  const menuItem = menuItemRefs.value[activeIndex.value];
  if (menuItem) {
    overlayLeft.value = menuItem.offsetLeft;
    overlayTop.value = menuItem.offsetTop;
    overlayWidth.value = menuItem.offsetWidth;
    overlayHeight.value = menuItem.offsetHeight;
  }
};
// 方法，显示选项底纹
const showOverlay = (index) => {
  const menuItem = menuItemRefs.value[index];
  if (menuItem) {
    overlayLeft.value = menuItem.offsetLeft;
    overlayTop.value = menuItem.offsetTop;
    overlayWidth.value = menuItem.offsetWidth;
    overlayHeight.value = menuItem.offsetHeight;
  }
};

// 方法，激活菜单项
const activateMenuItem = (index, item) => {
  activeIndex.value = index;
  const menuItem = menuItemRefs.value[index];
  if (menuItem) {
    overlayLeft.value = menuItem.offsetLeft;
    overlayTop.value = menuItem.offsetTop;
    overlayWidth.value = menuItem.offsetWidth;
    overlayHeight.value = menuItem.offsetHeight;
  }
  if (!item) return;
  if (item.path) {
    router.push(item.path);
  } else {
    menusAction.page = item.id;
  }
};

// 监听用户登录状态变化
watch(() => userStore.loginStatus, (newStatus) => {
  // 当登录状态改变时，重新激活当前菜单项以更新显示
  if (activeIndex.value >= 0 && activeIndex.value < menuItems.value.length) {
    const currentItem = menuItems.value[activeIndex.value];
    if (currentItem.id === 'login') {
      // 如果当前选中的是登录/用户中心菜单，需要重新激活以更新文本
      activateMenuItem(activeIndex.value, currentItem);
    }
  }
});

// 在组件挂载时获取所有菜单项的引用
onMounted(() => {
  menuItemRefs.value = [...menuItem.value];
  activateMenuItem(0);
});
</script>

<style lang="scss" scoped>
.menu {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

.menu-item {
  position: relative;
  padding: 0 10px;
  cursor: pointer;
  line-height: 45px;
  background-color: transparent;
  color: #a0a0a0;
  font-family: "Poppins", sans-serif;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.09em;
  transition: all 0.3s linear;

  &:hover {
    color: #eeeeee;
  }
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  pointer-events: none;
  border-radius: 3px;
  border-bottom: 3px solid #ffffff;
  transition: left 0.2s ease-in, width 0.2s ease-in;
}

.active {
  color: #fff;
  border-radius: 3px;
  border-bottom: 3px solid #ffffff;
  transition: left 0.2s ease-in, width 0.2s ease-in;
}
</style>
